<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18 - 环境对象(this 关键字)</title>
</head>
<body>
    <input type="button" value="文字">

    <script>

        // 环境对象     本质就是一个对象

        // 环境对象指的就是: this 关键字 (this 关键字就是一个对象)

        // 一般在事件中会使用 this 关键字 (环境对象)

        // 事件中的 this 这对象是谁 --- 事件中的 this 就是当前事件源 (this 指向事件源标签)
        // 如果在事件中要操作当前事件源, 那么就可以使用 this 关键字 (也可以不使用)



        // 代码演示:
        // 要求: 点击按钮, 给按钮的文字设置一个颜色
        let btn = document.querySelector('input');
        btn.addEventListener('click', function(){
            btn.style.color = 'red';
            // this 就是当前 input 标签 (this 就是当前事件源)
            console.log(this);
            this.style.color= 'red';
            this.style.border = '10px solid blue';
        });





        // this 指向
        // 在 '全局作用域'          this 指向的是 window 对象
        // 在 '局部作用域(函数)'    this 指向的是 window 对象
        // 在 '事件'               this 指向事件源
        // 在 '方法'               方法中的 this 指向当前方法的调用对象, 哪个对象调用方法, this 就指向该对象



        // 箭头函数中的 this 指向外层函数 this 指向对象


        
    </script>
</body>
</html>